<template>
  <div class="literature-review-container">
    <h2 class="text-2xl font-bold mb-6">文献综述生成</h2>
    
    <div class="mb-6">
      <label class="block text-gray-700 font-medium mb-2">研究主题</label>
      <input 
        type="text" 
        v-model="topic" 
        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        placeholder="请输入研究主题"
      >
    </div>
    
    <div class="mb-6">
      <label class="block text-gray-700 font-medium mb-2">选择文献</label>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div 
          v-for="paper in papers" 
          :key="paper.id"
          class="border border-gray-200 rounded-lg p-4 hover:border-blue-500 transition-colors cursor-pointer"
          :class="selectedPaperIds.includes(paper.id) ? 'border-blue-500 bg-blue-50' : ''"
          @click="togglePaperSelection(paper.id)"
        >
          <h3 class="font-medium text-gray-900">{{ paper.title }}</h3>
          <p class="text-sm text-gray-600 mt-1">{{ paper.author }} ({{ paper.year }})</p>
          <p class="text-xs text-gray-500 mt-2">{{ paper.publication }}</p>
        </div>
      </div>
      <p v-if="papers.length === 0" class="text-gray-500 italic">暂无上传的文献</p>
    </div>
    
    <button 
      @click="generateReview" 
      class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
      :disabled="!topic || selectedPaperIds.length === 0 || isLoading"
    >
      {{ isLoading ? '生成中...' : '生成文献综述' }}
    </button>
    
    <div v-if="reviewContent" class="mt-8">
      <h3 class="text-xl font-bold mb-4">生成的文献综述</h3>
      <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
        <div v-html="reviewContent"></div>
      </div>
      <div class="mt-4 flex justify-end">
        <button 
          @click="saveReview" 
          class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
        >
          保存文献综述
        </button>
      </div>
    </div>
    
    <div v-if="errorMessage" class="mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-md">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topic: '',
      papers: [],
      selectedPaperIds: [],
      reviewContent: '',
      isLoading: false,
      errorMessage: ''
    }
  },
  mounted() {
    this.fetchPapers();
  },
  methods: {
    async fetchPapers() {
      try {
        const response = await this.$axios.get('/api/papers/list');
        this.papers = response.data.papers;
      } catch (error) {
        this.errorMessage = '获取文献列表失败，请稍后再试';
        console.error(error);
      }
    },
    togglePaperSelection(paperId) {
      if (this.selectedPaperIds.includes(paperId)) {
        this.selectedPaperIds = this.selectedPaperIds.filter(id => id !== paperId);
      } else {
        this.selectedPaperIds.push(paperId);
      }
    },
    async generateReview() {
      if (!this.topic || this.selectedPaperIds.length === 0) return;
      
      this.isLoading = true;
      this.errorMessage = '';
      this.reviewContent = '';
      
      try {
        const response = await this.$axios.post('/api/review/generate', {
          paper_ids: this.selectedPaperIds,
          topic: this.topic
        });
        
        this.reviewContent = response.data.content;
        this.thesisId = response.data.thesis_id;
      } catch (error) {
        this.errorMessage = error.response?.data?.error || '生成文献综述失败，请稍后再试';
        console.error(error);
      } finally {
        this.isLoading = false;
      }
    },
    async saveReview() {
      if (!this.reviewContent || !this.thesisId) return;
      
      try {
        // 这里可以添加保存文献综述的逻辑
        this.$toast.success('文献综述已成功保存');
      } catch (error) {
        this.$toast.error('保存文献综述失败，请稍后再试');
        console.error(error);
      }
    }
  }
}
</script>